<template>
  <div class="shipDynamics">
    <div class="toggle" @click="show = !show"></div>
    <div class="shipDynamics-left">
      <div class="shipDynamics-left-num">
        <span>{{ total }}</span>
      </div>
      <div class="shipDynamics-left-title">新能源清洁能源船舶总数</div>
    </div>
    <template v-if="show">
      <div class="shipDynamics-right">
        <div
          class="shipDynamics-right-item"
          v-for="(item, index) in countList"
          :key="index"
        >
          <div class="shipDynamics-right-item-title">
            {{ item.label }}
          </div>
          <div class="shipDynamics-right-item-num">{{ item.value }}</div>
        </div>
      </div>
    </template>
    <template v-if="!show">
      <div class="shipDynamics-right1">
        <div
          class="shipDynamics-right-item"
          v-for="(item, index) in countList1"
          :key="index"
        >
          <div class="shipDynamics-right-item-title">
            {{ item.label }}
          </div>
          <div class="shipDynamics-right-item-num">{{ item.value }}</div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import { getShipPropulsiveTypeStatistics } from "../../api/newEnergyShip";
export default {
  name: "shipDynamics",
  data() {
    return {
      show: false,
      total: "0",
      countList: [
        {
          label: "LNG",
          value: 0,
        },
        {
          label: "电",
          value: 0,
        },
        {
          label: "氢",
          value: 0,
        },
        {
          label: "甲醇",
          value: 0,
        },
        {
          label: "其他",
          value: 0,
        },
      ],
      countList1: [
        {
          label: "纯电池",
          value: 0,
        },
        {
          label: "油电混合",
          value: 0,
        },
        {
          label: "单一LNG",
          value: 0,
        },
        {
          label: "双燃LNG",
          value: 0,
        },
        {
          label: "单一甲醇",
          value: 0,
        },
        {
          label: "双燃甲醇",
          value: 0,
        },
        {
          label: "氢燃料",
          value: 0,
        },
        {
          label: "其他",
          value: 0,
        },
      ],
    };
  },
  methods: {
    getData() {
      getShipPropulsiveTypeStatistics().then((res) => {
        if (res != null) {
          this.total = res.shipTotal;

          this.countList[0].value = res.oneLngCount + res.twoLngCount;
          this.countList[1].value = res.hybridCount + res.electricityCount;
          this.countList[2].value = res.hydrogenCount;
          this.countList[3].value = res.oneMethanolCount + res.twoMethanolCount;
          this.countList[4].value = res.otherCount;
          this.countList1 = [
            {
              label: "纯电池",
              value: res.electricityCount,
            },
            {
              label: "油电混合",
              value: res.hybridCount,
            },
            {
              label: "单一LNG",
              value: res.oneLngCount,
            },
            {
              label: "双燃LNG",
              value: res.twoLngCount,
            },
            {
              label: "单一甲醇",
              value: res.oneMethanolCount,
            },
            {
              label: "双燃甲醇",
              value: res.twoMethanolCount,
            },
            {
              label: "氢燃料",
              value: res.hydrogenCount,
            },
            {
              label: "其他",
              value: res.otherCount,
            },
          ];
        }
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
.shipDynamics {
  width: 100%;
  height: 120px;
  position: relative;
  display: flex;
  flex-direction: row;
  background: #0e2551;
  border-radius: 6px;
  .toggle {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    width: 16px;
    height: 16px;
    background: url("../../assets/newEnergyShip/toggle.png") no-repeat scroll 0
      0/100% auto;
    &:hover {
      opacity: 0.85;
    }
  }
  &-left {
    width: 120px;
    &-num {
      height: 75px;
      line-height: 75px;
      background: url("../../assets/newEnergyShip/cbdt.png") no-repeat scroll
        center center/100% auto;
      text-align: center;
      span {
        font-family: DIN;
        font-weight: bold;
        font-size: 38px;
        color: #ffffff;
        background: linear-gradient(136deg, #209cff 0%, #68e0cf 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    &-title {
      width: 100%;
      padding: 0 16px;
      font-size: 12px;
      font-weight: 400;
      margin-top: 5px;
      color: #ffffff;
      text-align: center;
      box-sizing: border-box;
    }
  }
  &-right {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-self: center;
    justify-items: center;
    grid-gap: 10px;
    font-size: 12px;
    margin-top: 30px;
    &-item {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      &-title {
        font-size: 10px;
        padding: 0 6px;
        box-sizing: border-box;
      }
      :first-child {
        width: 36px;
        height: 30px;
        text-align: center;
        margin-right: 3px;
        font-size: 10px;
      }
    }
    :nth-child(1) {
      :first-child {
        background: url("../../assets/newEnergyShip/lng.png") no-repeat scroll 0
          0/100% auto;
      }
      .shipDynamics-right-item-num {
        color: #f1af4a;
      }
    }
    :nth-child(2) {
      :first-child {
        background: url("../../assets/newEnergyShip/电.png") no-repeat scroll 0
          0/100% auto;
      }
      .shipDynamics-right-item-num {
        color: #fb3d33;
      }
    }
    :nth-child(3) {
      color: #0953e7;
      :first-child {
        background: url("../../assets/newEnergyShip/氢.png") no-repeat scroll 0
          0/100% auto;
      }
      .shipDynamics-right-item-num {
        color: #43ecf9;
      }
    }
    :nth-child(4) {
      :first-child {
        background: url("../../assets/newEnergyShip/t1.png") no-repeat scroll 0
          0/100% auto;
      }
      .shipDynamics-right-item-num {
        color: rgb(109, 202, 16);
      }
    }
    :nth-child(5) {
      :first-child {
        background: url("../../assets/newEnergyShip/其他.png") no-repeat scroll
          0 0/100% auto;
      }
      .shipDynamics-right-item-num {
        color: #706f6d;
      }
    }
  }

  &-right1 {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-self: center;
    justify-items: center;
    grid-gap: 10px;
    font-size: 12px;
    margin-top: 30px;
    &-item {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      &-title {
        font-size: 10px;
        padding: 0 6px;
        box-sizing: border-box;
      }
      &:first-child {
        width: 36px;
        height: 30px;
        text-align: center;
        margin-right: 3px;
        font-size: 10px;
      }
    }
    :nth-child(1) {
      :first-child {
        background: url("../../assets/newEnergyShip/t1.png") no-repeat scroll 0
          0/100% auto;
      }
      .shipDynamics-right-item-num {
        color: rgb(109, 202, 26);
      }
    }
    :nth-child(2) {
      :first-child {
        background: url("../../assets/newEnergyShip/t2.png") no-repeat scroll 0
          0/100% auto;
      }
      .shipDynamics-right-item-num {
        color: rgb(109, 239, 251);
      }
    }
    :nth-child(3) {
      :first-child {
        background: url("../../assets/newEnergyShip/t3.png") no-repeat scroll 0
          0/100% auto;
      }
      .shipDynamics-right-item-num {
        color: rgb(202, 183, 26);
      }
    }
    :nth-child(4) {
      :first-child {
        background: url("../../assets/newEnergyShip/t4.png") no-repeat scroll 0
          0/100% auto;
      }
      .shipDynamics-right-item-num {
        color: rgb(206, 133,80);
      }
    }
    :nth-child(5) {
      :first-child {
        background: url("../../assets/newEnergyShip/t5.png") no-repeat scroll 0
          0/100% auto;
      }
      .shipDynamics-right-item-num {
        color: rgb(80, 190, 217);
      }
    }
    :nth-child(6) {
      :first-child {
        background: url("../../assets/newEnergyShip/t6.png") no-repeat scroll 0
          0/100% auto;
      }
      .shipDynamics-right-item-num {
        color: rgb(249, 194, 75);
      }
    }
    :nth-child(7) {
      :first-child {
        background: url("../../assets/newEnergyShip/t7.png") no-repeat scroll 0
          0/100% auto;
      }
      .shipDynamics-right-item-num {
        color: rgb(83, 251, 158);
      }
    }
    :nth-child(8) {
      :first-child {
        background: url("../../assets/newEnergyShip/t8.png") no-repeat scroll 0
          0/100% auto;
      }
      .shipDynamics-right-item-num {
        color: rgb(33,182, 135);
      }
    }
  }
}
</style>
